import './index.less'
import { Button, Form, Input, message, Cascader } from 'antd';
import { useStateUserInfo } from '@/store/hooks';
import { useNavigate } from "react-router-dom";
import { handleSugg } from "@/api";
import { options } from "./data";
const { TextArea } = Input;
const Sugg = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const userInfo = useStateUserInfo()
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 3 },
    },
    // wrapperCol: {
    //   xs: { span: 24 },
    //   sm: { span: 14 },
    // },
  }
  // 提交建议
  const onFinish = (values: any) => {
    if (values && values.app && values.app['length'] > 0) {
      const app = values.app[values.app.length - 1]
      const obj: any = {
        'username': userInfo && userInfo['username'],
        'label': values && values['label'],
        'directory': app,
        'content': values && values['content'],
      }
      handleSugg(obj).then(res => {
        message.success('提交成功')
        setTimeout(() => {
          window.close()
        }, 300);
      })
    }
  };
  return (
    <div className="suggIndex">
      <h1 className="sugg_title">聆听建议</h1>
      <Form
        {...formItemLayout}
        form={form}
        onFinish={onFinish}
      >
        <Form.Item
          label="标题"
          name="label"
          rules={[{ required: true, message: '输入内容!' }]}>
          <Input placeholder="输入标题" />
        </Form.Item>
        <Form.Item
          label="云产品"
          name="app"
          rules={[{ required: true, message: '输入内容!' }]}>
          <Cascader
          placeholder="选择云产品"
            style={{ width: '100%' }}
            options={options}
            expandTrigger="hover"
          />
        </Form.Item>
        <Form.Item
          label="内容"
          name="content"
          rules={[{ required: true, message: '输入内容!' }]}>
          <TextArea placeholder="输入详细内容" rows={10} />
        </Form.Item>
        <Form.Item >
          <Button type="primary" htmlType="submit">提交</Button>
          <Button className="cancel_btn" onClick={() => { navigate('/home') }}>取消</Button>
        </Form.Item>
      </Form>
    </div>

  );
}

export default Sugg;